
.page-container {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8f9fa 0%, #f5f5f5 100%);
    padding: 20rpx;
  }
  
  .form-header-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 20rpx;
    color: white;
    box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
  }
  
  .header-top {
    margin-bottom: 30rpx;
  }
  
  .company-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20rpx;
  }
  
  .company-name {
    font-size: 32rpx;
    font-weight: 700;
    color: white;
    line-height: 1.4;
    flex: 1;
    min-width: 300rpx;
  }
  
  .doc-number {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    backdrop-filter: blur(10rpx);
  }
  
  .header-bottom {
    padding-top: 0rpx;
  }
  
  .apply-date {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15rpx;
  }
  
  .form-title {
    font-size: 42rpx;
    font-weight: 700;
    text-align: center;
    color: white;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  }
  
  .form-content-card {
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    margin-bottom: 20rpx;
    overflow: hidden;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #1a1a1a;
    margin: 40rpx 0 25rpx 0;
    padding: 20rpx 30rpx;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 16rpx;
    border-left: 6rpx solid #667eea;
    position: relative;
  
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 6rpx;
      background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
      border-radius: 3rpx;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 20rpx;
    padding: 30rpx;
    background: white;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    margin-bottom: 20rpx;
  
    .wd-button {
      flex: 1;
      height: 88rpx;
      border-radius: 16rpx;
      font-size: 30rpx;
      font-weight: 600;
  
      &[type="primary"] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
      }
  
      &:not([type="primary"]) {
        background: #f8f9fa;
        color: #666666;
        border: 2rpx solid #e9ecef;
      }
    }
  }
  
  :deep(.wd-card) {
    .wd-card__body {
      padding: 40rpx;
    }
  }
  
  :deep(.wd-cell-group) {
    margin-bottom: 25rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  
    .wd-cell {
      background: #fafbfc;
      border-bottom: 1rpx solid #f0f1f2;
  
      &:last-child {
        border-bottom: none;
      }
    }
  }
  
  :deep(.wd-input) {
    .wd-input__inner {
      background: transparent;
      font-size: 28rpx;
    }
  }
  
  :deep(.wd-textarea) {
    .wd-textarea__inner {
      background: transparent;
      font-size: 28rpx;
    }
  }
  
  :deep(.wd-radio-group) {
    .wd-cell {
      background: #fafbfc;
    }
  
    .wd-radio {
      margin-right: 30rpx;
    }
  }
  
  /* 响应式设计 */
  @media screen and (max-width: 750rpx) {
    .page-container {
      padding: 15rpx;
    }
  
    .form-header-card {
      padding: 30rpx 25rpx;
      border-radius: 16rpx;
    }
  
    .company-info {
      flex-direction: column;
      align-items: flex-start;
      gap: 15rpx;
    }
  
    .company-name {
      font-size: 28rpx;
      min-width: auto;
    }
  
    .doc-number {
      font-size: 22rpx;
      align-self: flex-end;
    }
  
    .form-title {
      font-size: 36rpx;
    }
  
    .section-title {
      font-size: 28rpx;
      padding: 15rpx 20rpx;
      margin: 30rpx 0 20rpx 0;
    }
  
    .action-buttons {
      padding: 20rpx;
      flex-direction: column;
  
      .wd-button {
        height: 80rpx;
        font-size: 28rpx;
      }
    }
  
    :deep(.wd-card) {
      .wd-card__body {
        padding: 30rpx 25rpx;
      }
    }
  
    :deep(.wd-cell-group) {
      margin-bottom: 20rpx;
      border-radius: 12rpx;
    }
  }
  
  /* 动画效果 */
  .form-header-card {
    animation: slideInDown 0.6s ease-out;
  }
  
  .form-content-card {
    animation: slideInUp 0.6s ease-out 0.2s both;
  }
  
  .action-buttons {
    animation: slideInUp 0.6s ease-out 0.4s both;
  }
  
  @keyframes slideInDown {
    from {
      opacity: 0;
      transform: translateY(-30rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(30rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* 弹窗容器样式 */
  .popup-container {
    border-radius: 32rpx 32rpx 0 0;
    z-index: 9999 !important; /* 确保弹窗在按钮上方 */
  }
  
  /* 弹窗内容 */
  .popup-content {
    background: #fff;
    border-radius: 32rpx 32rpx 0 0;
    padding: 0;
    max-height: 70vh; /* 限制最大高度 */
  }
  
  /* 弹窗头部 */
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 40rpx 32rpx;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
  }
  
  .popup-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    flex: 1;
    text-align: center;
  }
  
  .close-icon {
    position: absolute;
    right: 40rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
  }
  
  /* 弹窗主体 */
  .popup-body {
    padding: 40rpx;
  }
  
  .opinion-input {
    width: 100%;
    background: #f8f9fa;
    border-radius: 16rpx;
    border: 1px solid #e9ecef;
    font-size: 28rpx;
  }
  
  /* 弹窗底部 */
  .popup-footer {
    display: flex;
    gap: 24rpx;
    padding: 32rpx 40rpx 40rpx;
    background: #fff;
    justify-content: space-between; /* 两端对齐：取消在左，提交在右 */
  }
  
  .cancel-btn {
    min-width: 160rpx;
    background: #f8f9fa !important;
    color: #666 !important;
    border: 1px solid #e9ecef !important;
  }
  
  .submit-btn {
    min-width: 160rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
  }
  
  /* 操作按钮区域 */
  .action-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(255,255,255,1) 30%);
    backdrop-filter: blur(20rpx);
    padding: 40rpx 32rpx;
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
    display: flex;
    gap: 24rpx;
    z-index: 998; /* 降低z-index，确保选择器弹窗能显示在按钮上方 */
    border-top: 1px solid rgba(0,0,0,0.06);
    /* 添加过渡动画 */
    transition: transform 0.3s ease;
  }
  
  /* 可选：隐藏按钮的样式（如果需要动态显示/隐藏） */
  .action-buttons.hidden {
    transform: translateY(100%);
  }
  
  /* 自定义按钮基础样式 */
  .custom-button {
    flex: 1;
    height: 100rpx;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
  }
  
  /* 按钮内容 */
  .button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    z-index: 2;
    position: relative;
  }
  
  .button-icon {
    font-size: 28rpx;
    line-height: 1;
  }
  
  .button-text {
    font-size: 30rpx;
    font-weight: 600;
    letter-spacing: 1rpx;
  }
  
  /* 提交申请按钮 */
  .submit-btn {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 10rpx 25rpx rgba(99, 102, 241, 0.3);
    color: #fff;
  }
  
  .submit-btn:active {
    transform: translateY(2rpx);
    box-shadow: 0 5rpx 15rpx rgba(99, 102, 241, 0.4);
  }
  
  /* 审批按钮 */
  .approval-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10rpx 25rpx rgba(16, 185, 129, 0.3);
    color: #fff;
  }
  
  .approval-btn:active {
    transform: translateY(2rpx);
    box-shadow: 0 5rpx 15rpx rgba(16, 185, 129, 0.4);
  }
  
  /* 按钮悬停效果 */
  .submit-btn:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 15rpx 35rpx rgba(99, 102, 241, 0.4);
  }
  
  .approval-btn:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 15rpx 35rpx rgba(16, 185, 129, 0.4);
  }
  
  /* 按钮光泽效果 */
  .custom-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
    z-index: 1;
  }
  
  .custom-button:active::before {
    left: 100%;
  }
  
  /* 按钮文字阴影 */
  .submit-btn .button-text,
  .approval-btn .button-text {
    text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.1);
  }
  
  /* 页面内容底部间距 - 避免被固定按钮遮挡 */
  .page-container {
    padding-bottom: 240rpx;
  }
  
  .form-content-card {
    margin-bottom: 40rpx;
  }
  
  /* 确保最后的表单项有足够间距 */
  .form-content-card:last-of-type {
    margin-bottom: 80rpx;
  }
  
  /* 表单行间距 */
  .wd-row {
    margin-bottom: 32rpx;
  }
  
  .wd-row:last-child {
    margin-bottom: 0;
  }
  
  :deep(.wd-select-picker) {
    .wd-popup {
      z-index: 10001 !important;
      position: fixed !important;
      top: 50vh !important;          /* 使用vh单位，相对于视口高度 */
      left: 0 !important;            /* 左边对齐屏幕边缘 */
      right: 0 !important;           /* 右边对齐屏幕边缘 */
      bottom: auto !important;
      transform: translateY(-50%) !important;  /* 只垂直居中 */
      width: 95vw !important;       /* 宽度占满整个屏幕 */
      max-width: none !important;    /* 取消最大宽度限制 */
      border-radius: 0 !important;   /* 取消圆角，贴合屏幕边缘 */
      box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2) !important;
    }
  
    .wd-popup__content {
      position: relative !important;
      border-radius: 0 !important;   /* 取消圆角 */
      overflow: hidden !important;
      max-height: 70vh !important;   /* 最大高度相对于视口 */
      overflow-y: auto !important;
    }
  }
  
  /* 全局弹窗样式修复 - 宽度占满屏幕 */
  :deep(.wd-popup) {
    &[data-position="center"] {
      position: fixed !important;
      top: 50vh !important;          /* 视口高度的50% */
      left: 0 !important;            /* 左边对齐屏幕边缘 */
      right: 0 !important;           /* 右边对齐屏幕边缘 */
      bottom: auto !important;
      transform: translateY(-50%) !important;  /* 只垂直居中 */
      z-index: 10001 !important;
      width: 100vw !important;       /* 宽度占满整个屏幕 */
      max-width: none !important;    /* 取消最大宽度限制 */
      border-radius: 0 !important;   /* 取消圆角 */
    }
  }
  :deep(.wd-calendar){
    .wd-popup {
      z-index: 10002 !important;
      position: fixed !important;
      top: 50vh !important;          /* 使用vh单位，相对于视口高度 */
      left: 5vw !important;            /* 左边对齐屏幕边缘 */
      right: 5vw !important;           /* 右边对齐屏幕边缘 */
      bottom: auto !important;
      transform: translateY(-50%) !important;  /* 只垂直居中 */
      width: 80vw !important;       /* 宽度占满整个屏幕 */
      max-width: none !important;    /* 取消最大宽度限制 */
      border-radius: 0 !important;   /* 取消圆角，贴合屏幕边缘 */
      box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2) !important;
    }
  
    .wd-popup__content {
      position: relative !important;
      border-radius: 0 !important;   /* 取消圆角 */
      overflow: hidden !important;
      max-height: 70vh !important;   /* 最大高度相对于视口 */
      overflow-y: auto !important;
    }
  }
  
  /* 确保驳回弹窗中的选择器显示正确 */
  :deep(.popup-container .wd-select-picker) {
    .wd-popup {
      z-index: 10002 !important;
    }
  }
  
  /* 响应式适配 */
  @media (max-width: 750rpx) {
    .action-buttons {
      padding: 32rpx 24rpx;
    }
  
    .custom-button {
      height: 88rpx;
    }
  
    .button-text {
      font-size: 28rpx;
    }
  }
  
  /* 页面内容底部留白，避免被固定按钮遮挡 */
  .page-content {
    padding-bottom: 200rpx;
  }
  
  /* 美化表单样式 */
  .form-container {
    padding: 40rpx;
    background: #fff;
    margin-bottom: 20rpx;
  }
  
  .form-item {
    margin-bottom: 32rpx;
  }
  
  .form-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 500;
  }
  
  /* 审批记录按钮样式 */
  .approval-record-button {
    position: fixed;
    right: 20rpx;
    bottom: 280rpx;
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
    z-index: 999;
    transition: all 0.3s ease;
    cursor: pointer;
  
    &:active {
      transform: scale(0.95);
      box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
    }
  }
  
  .approval-record-button .button-text-top {
    font-size: 20rpx;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 2rpx;
  }
  
  .approval-record-button .button-text-bottom {
    font-size: 20rpx;
    color: #fff;
    font-weight: 500;
    line-height: 1;
  }
  
  @media screen and (max-width: 750rpx) {
    .approval-record-button {
      right: 15rpx;
      bottom: 260rpx;
      width: 70rpx;
      height: 70rpx;
    }
  
    .approval-record-button .button-text-top,
    .approval-record-button .button-text-bottom {
      font-size: 18rpx;
    }
  }